<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
		<style>
			*{
				margin: 0 ;
				padding: 0;
				font-family: "楷体";
			}
			a{
				text-decoration: none;
			}
			.first
			{
				width: 100%;
				height: 1000px;
				background-image: linear-gradient(180deg, #9FA5D5,#E8F5C8);
				border-radius: 0 0 100px 100px;
			}
			.firstall{
				position: relative;
				margin: 0 auto;
				width: 93.75rem;
				height: 160px;
				
			}
			.first1{
				position: absolute;
				width: 600px;
				height: 160px;
				
				display: inline-block;
			}
			.first1 h1{
				position: absolute;
				font-size: 50px;
				top: 40px;
				left: 80px;
				
			}
			.first2{
				position:absolute;
				
				width: 800px;
				height: 160px;
				top: 0;
				right: 0;
				background-color:;
			}
			.first2 ul li{
				margin: 20px;
				margin-top: 50px;
				list-style: none;
				
				font-size: 30px;
				float: left;
			}
			.first2 ul li a:hover{
				
				color: red;
			}
			.firstall1{
				position: relative;
				margin: 0 auto;
				width: 93.75rem;
				height: 280px;
				
			}
			.firstall2{
				position: relative;
				margin: 0 auto;
				width: 93.75rem;
				height: 500px;
				
				border-radius: 0 0 100px 100px;
			}
			.first3{width: 1500px;
			height: 280px;
			
			}
			.first3 h1{position: absolute;
			top: 50px;
			font-size: 50px;
			left: 470px;}
			.first3 .p1{position: absolute;
			top: 150px;
			font-size: 25px;
			left: 300px;}
			.first3 .p2{position: absolute;
			top: 200px;
			font-size: 25px;
			left: 230px;}
			#friends1{
				position: absolute;
				width: 300px;
				bottom: 1px;
			right: 100px;
				height: 480px;
				border-radius: 15px;
			}
			#friends2{
				bottom: 20px;
				
				left: 60px;
				position: absolute;
				width:650px;
				height:430px;
				border-radius: 20px;
			}
			#friends3{
				position: absolute;
				width: 500px;
				height:300px;
				bottom: 1.875rem;
				right: 400px;
				border-radius: 15px;
			}
			.write{
				position: relative;
				margin: 0 auto;
				width: 1500px;
				height: 300px;
			}
			.write h1{position: absolute;
			display: inline;
			border-bottom: #000000 1px solid;
			
			font-size: 60px;
				top: 40px;left: 550px;
			}
			.writep1{
				position: absolute;
				font-size: 30px;
				top: 120px;
				left: 200px;
			}
			.writep2{
				position: absolute;
				font-size: 30px;
				top: 170px;
				left: 420px;
			}
			.secondall{
				
			
				width: 100%;
				height: 1200px;
				background-image: linear-gradient(180deg, #F9957F,#E8F5C8);
			}
			.second1{position: relative;
					margin: 0 auto;
					margin-bottom: 30px;
				width: 1500px;
				height: 350px;
				
			}
			.second2{position: relative;
					margin: 0 auto;
					margin-bottom: 30px;
				width: 1500px;
				height: 350px;
				
			}
			.second3{
				position: relative;
					margin: 0 auto;
				width: 1500px;
				height: 350px;
				
			}
			#sec1image{
				width: 482px;
				height: 280px;
				border-radius: 20px;
			}
			#sec1image:hover{
				transform: scale(1.1);
				transition: 0.3s;
				
			}
			.direct{
				position: absolute;
				display: inline-block;
				
			}
			.direct a:hover{
				color: #000000;
			}
			.second1 img{
				margin-top: 10px;
				margin-left: 12px;
			}
			.second2 img{
				margin-top: 10px;
				margin-left: 12px;
			}
			.second3 img{
				margin-top: 10px;
				margin-left: 12px;
			}
			#direct1{font-size: 30px;
			bottom: 20px;
			left: 200px;
			}
			#direct2{font-size: 30px;
			bottom: 20px;
			left: 700px;
			}
			#direct3{font-size: 30px;
			bottom: 20px;
			left: 1200px;
			}
			#direct4{font-size: 30px;
			bottom: 20px;
			left: 200px;
			}
			#direct5{font-size: 30px;
			bottom: 20px;
			left: 700px;
			}
			#direct6{font-size: 30px;
			bottom: 20px;
			left: 1200px;
			}
			#direct7{font-size: 30px;
			bottom: 20px;
			left: 200px;
			}
			#direct8{font-size: 30px;
			bottom: 20px;
			left: 700px;
			}
			#direct9{font-size: 30px;
			bottom: 20px;
			left: 1200px;
			}
			.thirdall{
				width: 100%;
				height: 800px;
				background-image: linear-gradient(180deg, #EAE5C9,#6CC6CB,#ffff);
				border-radius: 100px 100px 0 0;
			}
			.third{
				position: relative;
				margin: 0 auto;
				width: 1500px;
				height: 800px;
				
				border-radius: 100px 100px 0 0;
			}
			.third1{
				position: absolute;
				height: 530px;
				left: 100px;
				top: 200px;
				width: 420px;
				background-image: linear-gradient(180deg, #EAE5C9,#6CC6CB);
				border-radius: 20px;
			}
			.third2{
				position: absolute;
				top: 200px;
				left: 540px;
				height: 530px;
				width: 420px;
				background-image: linear-gradient(180deg, #EAE5C9,#6CC6CB);
				border-radius: 20px;
			}
			.third3{
				position: absolute;
				height: 530px;
				top: 200px;
				right: 100px;
				width: 420px;
				background-image: linear-gradient(180deg, #EAE5C9,#6CC6CB);
				border-radius: 20px;
			}
			 .jianbian{
				 border-radius: 0px 0px 1000px 1000px;
			    height: 150px;
				background-color: red; /* 浏览器不支持的时候显示 */
			    background-image: linear-gradient(90deg, #EAE5C9,#6CC6CB); /* 标准的语法（必须放在最后） */
			}
			.money{
				position: absolute;
				font-size: 36px;top: 180px;left: 160px;
			}
			.monp1{
				font-size: 30px;
				position: absolute;
				top: 220px;
				left: 160px;
				}
				.monp2{
					font-size: 30px;
					position: absolute;
					top: 250px;
					left: 160px;
					}
					.monp3{
						font-size: 30px;
						position: absolute;
						top: 280px;
						left: 160px;
						}
			.jianbian:hover{
						 background-image: linear-gradient(90deg,#6CC6CB ,#EAE5C9);
				}
				.third1:hover{
					background-image: linear-gradient(200deg,#6CC6CB ,#EAE5C9);
				}
				.third2:hover{
					background-image: linear-gradient(200deg,#6CC6CB ,#EAE5C9);
				}
				.third3:hover{
					background-image: linear-gradient(200deg,#6CC6CB ,#EAE5C9);
				}
				.footerwrp{
					width: 100%;
					height: 400px;
					background-color: rgba(0,0,,0.4);
				}
				.footer{
					width: 1500px;
					height: 400px;
					background-color: #1479D7;
				}
		</style>
	</head>
	<body>
		<section>
			<div class="first">
				<div class="firstall">
					<div class="first1">
						<h1><a href="#" class="logos"style="color: #000000;"><i class="fa fa-hand-grab-o"></i>运动交友吧交友平台</a></h1>
						<h2>simplest简约</h2>
					</div>
					<div class="first2">
						<ul>
							<li><a href="主页.html"><i class="fa fa-smile-o"></i>主页</a></li>
							<li><a href="交友1.html"><i class="fa fa-group"></i>交友</a></li>
							<li><a href="商店.html"><i class="fa fa-shopping-cart"></i>商店</a></li>
							<li><a href="index.html"><i class="fa fa-user-circle-o" ></i>登录入口</a></li>
							<li><a href="创业计划书.html.html"><i class="fa fa-eye"></i>创业计划书</a></li>
							
						</ul>
						
					</div>
				</div>
				<div class="firstall1">
					<div class="first3">
						<h1>独一无二的社交网络平台</h1>
						<p class="p1">Simplest is developer-friendly, rich with features and highly customizable.</p>
						<p class="p2">We’ve followed the highest industry standards to bring you the very best Social template</p>
						<p class="p3" style="font-size: 35px;">手机移动端正在开发中，以下为概念图</p>
					</div>
				</div>
				<div class="firstall2">
					<div class="first4">
						<img class="friends" id="friends1" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1356483096,1166035519&fm=26&gp=0.jpg">
						<img class="friends" id="friends2" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2968458342,1588228959&fm=26&gp=0.jpg">
						<img class="friends" id="friends3" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3564529021,686991264&fm=26&gp=0.jpg">
						
					</div>
				</div>
			</div>
		</section>
		<div class="write">
			<h1>强大的交友功能</h1>
			<p class="writep1">多种不同的风格和主页Explore our landing page demos on different kind of topics.</p>
			<p class="writep2">更多功能正在开发中,More demos are coming soon.</p>
		</div>
		<section>
			<div class="secondall">
				<div class="second1">
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos//feeds.png" />
					<div class="direct" id="direct1"><a href="#">Feed</a></div>
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/albums.png" />
					<div class="direct"id="direct2"><a href="#">Albums</a></div>
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/timeline.png" />
					<div class="direct"id="direct3"><a href="#">Timeline</a></div>
				</div>
				<div class="second2">
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/blog.png" />
					<div class="direct"id="direct4"><a href="#">Blog</a></div>
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/events.png" />
					<div class="direct"id="direct5"><a href="#">Events</a></div>
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/explore.png" />
					<div class="direct"id="direct6"><a href="#">Explore</a></div>
				</div>
				<div class="second3">
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/group-feed.png" />
					<div class="direct"id="direct7"><a href="#">Group-feed</a></div>
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/pages.png" />
					<div class="direct"id="direct8"><a href="#">Pages</a></div>
					<img id="sec1image" src="https://demosc.chinaz.net/Files/DownLoad/moban/202011/moban5050/assets/images/demos/pokes.png" />
					<div class="direct"id="direct9"><a href="#">Offers</a></div>
				</div>
			</div>
		</section>
		<div class="write">
			<h1 style="position: absolute;">We’re Here For You</h1>
		<p class="writep1" style="left: 400px;top: 200px;"> 365 DAYS A YEAR,提供你想要的服务,有我们，包您运动交友双倍快乐</p>
		</div>
		<section>
			<div class="thirdall">
				<div class="third">
					<div class="third1">
						<div class="jianbian"></div>
						<h1 class="money">￥6.6</h1>
						<p class="monp1">课程包（小）+</p>
						<p class="monp2">手机App预定+</p>
						<p class="monp3">7天VIP</p>
					</div>
					<div class="third2">
						<div class="jianbian"></div>
						<h1 class="money">￥19.9</h1>
						<p class="monp1">课程包（中）+</p>
						<p class="monp2">手机App预定+</p>
						<p class="monp3">一个月VIP</p>
					</div>
					<div class="third3">
						<div class="jianbian"></div>
						<h1 class="money">￥39.9</h1>
						<p class="monp1">课程包（大）+</p>
						<p class="monp2">手机App预定+</p>
						<p class="monp3">半年VIP</p>
					</div>
					<h1 style="position: absolute;bottom: 0;left: 450px;font-size: 27px;">页面制作不易，希望各位优秀的评委和老师能给高分<i class="fa-arrow-up"></i></h1>
					<br />
				</div>
			</div>
		</section>
	
	</body>
</html>
